<!-- 
*   @Description:注意事项
*   @Author:lxy
*   @Date:2023-03-23 10:23
-->
<template>
  <div>
    <div
      class="contraindications_box"
      v-for="(item, index) in dataALL"
      :key="index"
    >
      <span class="spanTile">{{
        "注意事项" + convertToChineseNumeral(index + 1)
      }}</span>
      <el-input
        type="text"
        class="shuruInput"
        @blur="blurHandler"
        @focus="focusHandler"
        v-model="item.val"
      >
      </el-input>
      <span
        class="deleteClass"
        ref="calaasfdv"
        @click="($event) => jianFunction(item.id)"
        >-</span
      >
    </div>
    <el-button
      icon="el-icon-plus"
      class="addButtonClass"
      @click="addClickHandler"
    >
      新增
    </el-button>
  </div>
</template>

<script>
import { convertToChineseNumeral } from "@/components/config/index";
export default {
  name: "contraindications",
  data() {
    return {
      dataALL: [{ id: this.algorithm(), val: "" }],
    };
  },
  methods: {
    convertToChineseNumeral,
    //添加数据
    addClickHandler() {
      if (this.dataALL.length > 9) {
        this.$notify.warning({ title: "错误", message: "最多可填十条建议" });
        return;
      }
      this.dataALL.push({
        id: this.algorithm(),
        title: `${this.dataALL.length + 1}`,
        val: "",
      });
    },
    //删除数据
    jianFunction(id) {
      this.dataALL.forEach((item, index) => {
        if (this.dataALL.length == 1) {
          this.$notify.warning({
            title: "错误",
            message: "必须留有一条数据，可填无",
          });
          return;
        }
        if (item.id == id) this.dataALL.splice(index, 1);
      });
    },
    //外部读取数据
    setOutFunction() {
      let str = "";
      this.dataALL.forEach((item) => {
        if (item.val != "") str = str + item.val + "、";
      });
      if (str.substr(-1) != "、") return str == "" ? "无" : str;
      let resData = str.slice(0, -1);
      return resData == "" ? "无" : resData;
    },
    clickHandler() {
      console.log(this.setOutFunction());
    },
    //生成唯一id
    algorithm() {
      let abc = [
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "g",
        "k",
        "l",
        "m",
        "n",
        "o",
        "p",
        "q",
        "r",
        "s",
        "t",
        "u",
        "v",
        "w",
        "x",
        "y",
        "z",
      ];
      let [max, min] = [
        Math.floor(Math.random() * (10 - 7 + 1) + 1),
        Math.floor(Math.random() * (17 - 10 + 1) + 17),
      ];
      abc = abc
        .sort(() => 0.4 - Math.random())
        .slice(max, min)
        .slice(0, 8)
        .join("");
      var a = new Date().getTime() + abc;
      return a;
    },
    //input框失焦时触发
    blurHandler(e) {
      let spanHtml = e.currentTarget.parentElement.nextElementSibling;
      spanHtml.style.opacity = 0;
    },
    //input框聚焦时触发
    focusHandler(e) {
      let spanHtml = e.currentTarget.parentElement.nextElementSibling;
      spanHtml.style.opacity = 1;
    },
  },
};
</script>

<style scoped lang="less">
.contraindications_box {
  padding: 0px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.spanTile {
  display: inline-block;
  width: 90px;
  font-size: 14px;
  font-weight: 600;
  margin-right: 13px;
}
.shuruInput {
  width: 90%;
}
.addButtonClass {
  margin: 10px 0px 0px 30px;
}
.deleteClass {
  display: inline-block;
  margin-left: 10px;
  border-radius: 50%;
  text-align: center;
  width: 20px;
  height: 20px;
  background-color: rgba(236, 39, 39, 0.479);
  opacity: 0;
  cursor: pointer;
  transition: all 0.3s ease-in;
  &:hover {
    opacity: 1;
  }
}
</style>
